<template>
  <div id="app">
    <transition name="fade">
      <router-view/>
    </transition>
  </div>
</template>

<style lang="stylus">
primary-color = #6c757d

@keyframes Rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

.fade-enter
  opacity: 0
.fade-leave
  opacity: 1
.fade-enter-active
  transition: opacity .3s
.fade-leave-active
  opacity: 0
  transition: opacity 0s

.flex-sp-be
  display: flex
  justify-content: space-between
  align-items: center
.flex-sp-ar
  display: flex
  justify-content: space-around
  align-items: center
.flex-left-center
  display: flex
  justify-content: left
  align-items: center
.flex-right-center
  display: flex
  justify-content: right
  align-items: center
.flex-center
  display: flex
  justify-content: center
  align-items: center
.form-line
  height: 50px
  width: 100%
  .label
    width: 80px
    text-align: right
    margin-right: 3px
  .form-item
    width: 80%

html, body
  height 100%
#app
  height 100%
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #6c757d
  overflow: hidden
  background-color: #F2F6FC
  // font-size: 14px
</style>
